<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上传商品</title>
<link rel="stylesheet" type="text/css" media="screen" href="js/3rdparty/jquery-ui/themes/base/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="js/3rdparty/jqGrid_5.1.0/css/ui.jqgrid.css" />
<!-- <link rel="stylesheet" type="text/css" media="screen" href="js/3rdparty/jqGrid_5.1.0/css/ui.jqgrid-bootstrap.css" /> -->
<!-- <link rel="stylesheet" type="text/css" media="screen" href="js/3rdparty/jqGrid_5.1.0/css/ui.jqgrid-bootstrap-ui.css" /> -->
<style>
div#imagePreview img, .imagesList {
    width: auto;
    height: 100px;
}

#imageSrc {
    display: none;
}
</style>
</head>
<body>
<table id="uploadGoods"></table>
<div id="uploadGoodsPager"></div>
</body>
<script type="text/javascript" src="js/3rdparty/jqGrid_5.1.0/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/3rdparty/jqGrid_5.1.0/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="js/3rdparty/jqGrid_5.1.0/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="js/3rdparty/jquery.form/jquery.form.js"></script>
<script type="text/javascript">
    $('body').delegate('#uploadImage', 'change', function(e) {
        var fileList = $('#uploadImage').get(0).files;
        if(fileList.length < 1) {
            $('#btnUploadImage').hide();
        } else {
            $('#btnUploadImage').show();
        }
    });
    $('body').delegate('#btnUploadImage', 'click', function(){
        if(window.File && window.FileList && window.FileReader && window.Blob) {
            
        } else {
            document.write('您的浏览器不支持File Api');
            return;
        }
        var fileList = $('#uploadImage').get(0).files;
        if(fileList.length < 1) {
           alert('请选择一张图片');
           return;
        }
        // 实例化一个表单数据对象
        var formData = new FormData();
        for(var i = 0, file; file = fileList[i]; i++) {
            formData.append(file.name, file);
        }
        $.ajax({
            url: 'file/uploadImage',
            type: 'POST',
            dataType: 'text',
            processData: false,
            contentType: false,
            data: formData,
            async: true,
            error: function() {
                alert('Operate Failed!');
            },
            success: function(data) {
                if(data !== null && data !== undefined && data !== '') {
                    var retObject = JSON.parse(data);
                    var images = retObject.imageSrc;
                    $('#imageSrc').val(images);
                    for (var i = 0; i < images.length; i++) {
                        var imageUrl = images[i];
                        var img = document.createElement('img');
                        img.src = imageUrl;
                        img.style.height = '100px';
                        img.style.width = 'auto';
                        $('#imagePreview').append(img);
                    }
                    $('#imagePreviewDiv').show();
                }
            }
        });
    });
    var uploadEditTemplate = '<div style="margin-left:15px;height: 1000px;"><div> 商品名称 <sup>*</sup>: </div><div>{goodName} </div>';
    uploadEditTemplate += '<div> 图片: </div><input id="uploadImage" type="file" accept="image/png,image/gif,image/jpg" multiple /><input type="button" id="btnUploadImage" value="Upload" style="display:none;" /</div><div id="imageSrc" class="imageSrc">{imageSrc} </div>';
    uploadEditTemplate += '<div><div id="progressNumber"></div></div>'
    uploadEditTemplate += '<div id="imagePreviewDiv" style="display:none;"><div> 预览: </div><div><div id="imagePreview"></div></div></div>'
    uploadEditTemplate += '<div> 价格: </div><div>{goodPrice} </div>';
    uploadEditTemplate += '<div> 备注: </div><div>{goodDesc} </div>';
    uploadEditTemplate += '<div> {sData} {cData}  </div></div>';
    var colModel = [ {
        label : 'UUID',
        name : 'goodUUID',
        width : 75,
        key : false,
        editable : false
    }, {
        label : '商品名称',
        name : 'goodName',
        width : 140,
        editable : true
    // must set editable to true if you want to make the field editable
    }, {
        label : '图片',
        name : 'imageSrc',
        width : 140,
        editable : true,
        formatter : imagesFormatter
    }, {
        label : '价格',
        name : 'goodPrice',
        width : 100,
        editable : true
    }, {
        label : '备注',
        name : 'goodDesc',
        width : 80,
        editable : true
    }];
    var options = {
        //url:'servlet/goodsList',
        url: 'servlet/findAllGoods',
        datatype : 'json',
        colModel : colModel,
        rowNum : 10,
        rowList : [ 10, 20, 30 ],
        pager : '#uploadGoodsPager',
        sortname : 'goodUUID',
        loadonce : true,
        viewrecords : true,
        sortorder : 'desc',
        caption : '上传商品',
        editurl : 'servlet/editgood',
        width: 1000,
        height: 600
    };
    $('#uploadGoods').jqGrid(options);
    $('#uploadGoods').navGrid('#uploadGoodsPager',
    // the buttons to appear on the toolbar of the grid
    {
        edit : true,
        add : true,
        del : true,
        search : false,
        refresh : false,
        view : false,
        position : 'left',
        cloneToTop : false
    },
    // options for the Edit Dialog
    {
        editCaption : 'The Edit Dialog',
        recreateForm : true,
        checkOnUpdate : true,
        checkOnSubmit : true,
        closeAfterEdit : true,
        errorTextFormat : function(data) {
            return 'Error: ' + data.responseText
        },
        width: 800,
        height: 600
    },
    // options for the Add Dialog
    {
        closeAfterAdd : true,
        recreateForm : true,
        template: uploadEditTemplate,
        errorTextFormat : function(data) {
            return 'Error: ' + data.responseText
        },
        width: 800,
        height: 600
    },
    // options for the Delete Dailog
    {
        errorTextFormat : function(data) {
            return 'Error: ' + data.responseText
        },
        width: 800,
        height: 600
    });
    function imagesFormatter(cellvalue, options, rowdata) {
        var imagesElement = '';
        if (cellvalue) {
            var imgs = cellvalue.split(',');
            for (var imgIndex in imgs) {
                var imageSrc = imgs[imgIndex];
                imagesElement += '<img class="imagesList" src="' + imageSrc + '" alt="' + imageSrc + '" />';
            }
        }
        return imagesElement;
    };
</script>
</html>